<template>
  <div class="total_customer_table">
    <el-table
      ref="table"
      :data="queryTableAllDataList"
      style="width: 100%"
      :cell-style="{ padding: 0, height: '30px' }"
      :header-cell-style="{
        background: '#f4f4f4',
        padding: 0,
        height: '40px'
      }"
      highlight-current-row
      show-summary
      :summary-method="getSummaries"
      :height="checkboxSelectValue ? '70vh' : '74vh'"
    >
      <el-table-column prop="typeNumber" label="款号" sortable width="130">
      </el-table-column>
      <el-table-column prop="colorName" label="颜色" sortable width="100px">
      </el-table-column>
      <el-table-column prop="size" label="尺码" sortable> </el-table-column>
      <el-table-column prop="sellingPrice" label="售价" sortable>
      </el-table-column>
      <el-table-column prop="customerName" label="客户简称" sortable>
      </el-table-column>
      <el-table-column prop="brandedName" label="品牌名称" sortable>
      </el-table-column>
      <el-table-column prop="customerInput" label="客进" sortable>
      </el-table-column>
      <el-table-column prop="customerOut" label="客退" sortable>
      </el-table-column>
      <el-table-column prop="customerSell" label="客销" sortable>
      </el-table-column>
      <!-- <el-table-column prop="name" label="销售金额" sortable> </el-table-column> -->
      <el-table-column prop="customerRepertory" label="客存" sortable>
      </el-table-column>
      <!-- <el-table-column prop="name" label="首进日" sortable> </el-table-column> -->
      <!-- <el-table-column prop="name" label="首销日" sortable> </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    // 接受父数组传过来的数组
    queryTableAllDataList: {
      type: Array,
      default() {
        return []
      }
    },
    // 父组件传过来的多条件查询，是否被点击
    checkboxSelectValue: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    // 自定义合计行显示的数据
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        // if判断这里才是能指定合计中的每每一列显示什么内容
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (
          index === 1 ||
          index === 2 ||
          index === 3 ||
          index === 4 ||
          index === 5
        ) {
          sums[index] = ''
          return
        }
        // if (index === 10) {
        //   sums[index] = "显示10 ";
        //   return;
        // }
        // if不指定，下面就会自动的操作数据并且合计了，不用手动操作
        const values = data.map((item) => Number(item[column.property]))
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          // sums[index] += " 元";
          sums[index] += ' '
        } else {
          sums[index] = '0'
        }
      })

      return sums // 会显示这个数组里面的各个Item,那么想要改变的话，直接改变里面的item值就行
    },
    // 表格的row（行）被单击的时候，触发的函数
    handleTableRowClick(row) {
      console.log(row)
      this.$emit('addImageUrlGiveTatherComponent', row.image, row.typeNumber)
    }
  },
  // 加了高度之后，合计不显示，这个时候，只能updata中重载
  updated() {
    this.$nextTick(() => {
      this.$refs['table'].doLayout()
    })
  }
}
</script>

<style></style>
